
<template>
    <view class="page">
        <view class='bj_able'>
            <view class="totalMoney">
                <view class='able_text'>{{__('向')}} {{store_name}} {{__('支付金额')}}</view>
            </view>
            <view class='able_input'>
                <view class='able_fuhao'>{{Currency}}</view>
                <input class='input_lab'  type="digit" @input="inputnum" maxlength="8" @blur="blur" v-model='deliveryNum'></input>
                <view class='pict_fal' @click="clearnum">
                    <image class='fal_pic' src='/static/images/false.png'></image>
                </view>
            </view>
            <view class="nodiscount" v-if="isshow1">
                <checkbox-group class="check" @change="checkboxChange"><label class="checkbox">
                    <checkbox style="transform:scale(0.6);-webkit-transform:scale(0.6);-o-transform:scale(0.6);-moz-transform:scale(0.6);-ms-transform:scale(0.6)" />{{__('输入不参与优惠金额')}}
                </label></checkbox-group>
            </view>
            <view class="title" style="background"></view>
            <view class="totalMoney  no_lab" v-if="isshow" style="background:#fff"><label>不参与优惠金额：</label><input placeholder="询问服务员后输入"
                                                                                                                      type="digit" @input="onNodiscount" maxlength="8" @blur="blur1" :value="nodiscountvalue" /></view>
            <view class="discount" v-if="isshow1 && shop_discount<10">
                <image src="https://static.shopsuite.cn/xcxfile/appicon/img/discount-icon.png" style="width:50rpx;height:54rpx;float:left;margin-top:16rpx"></image><text
                    style="float:left;margin-left:20rpx">{{shop_discount||10}}折</text><text style="color:#db384c;float:right">-{{Currency}}{{discount}}</text>
            </view>
            <view class="pay">
                <view class="coupon" @click="suitcouponlist" v-if="CouponEnabeld==true&&isCoupon">
                    <view><text style='letter-spacing: 2.4rpx;font-size:26rpx;'>{{__('优惠券')}}</text></view>
                    <view style="color:#db384c;">-{{Currency}}{{DiscountMoney}}
                        <text class="m-cell-ft"></text></view>
                </view>
                <view class="coupon" v-if="MaxUsableCash>0&&isECashCard">
                    <view class=""><text style='font-size:26rpx;'>{{__('余额抵扣')}}</text><text style="font-size:24rpx;color: #333333;">({{__('可使用')}}{{Currency}}{{MaxUsableCash}})</text></view>
                    <view class=""><text class="" v-if="isBalance" style="position:absolute;right:19%;color:#db384c">{{Currency}}{{balance}}</text>
                        <switch checked @change="switchChange" style="transform:scale(0.6);position:absolute;right:36rpx" />
                    </view>
                </view>
                <view class=" payments"><label style='letter-spacing: 2.4rpx;font-size:26rpx;'>{{__('实付款')}}</label><text style="color:#db384c">{{Currency}}{{realPayMoney}}</text></view>
            </view>
            <form report-submit="true" @submit="paysubmit" v-if='isSubmit'><button class="payment" formType="submit">{{__('确认支付')}}</button></form>
            <form report-submit="true" v-else><button class="payment" formType="submit">{{__('确认支付')}}</button></form>
            <view class="explain" v-if="Description">
                <view class="title">{{__('买单说明：')}}</view>
                <view class="content">{{Description}}
                </view>
            </view>
        </view>
        <view class="u-top-default">
            <navigator url='/pages/index/index' open-type="switchTab" class="u-back2">
                <image src='https://static.shopsuite.cn/xcxfile/appicon/img/gohome.png'></image>
            </navigator>
        </view>

		<payment-box :paymentDataDefault="paymentData" :order_id="order_id" kind="favorable" ref="paymentBox"  @onCancel="onCancel"  @onPaid="onPaid"  @onFail="onFail"></payment-box>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'


    import paymentBox from '../../components/payment-box.vue'
	
    export default {
        data: function() {
            return {
                store_name: "",
                money: "",
                nodiscount: "",
                discount: "",
                isshow: false,
                deliveryNum: "",
                isshow1: false,
                shop_discount: 10,
                totalMoney: "",
                payment: 0,
                info: [],
                order_id: "",
                formId: "",
                time: "",
                Description: "",
                MoneyLimit: "",
                CouponEnabeld: "",
                discountvalue: "",
                nodiscountvalue: "",
                DiscountMoney: "0.00",
                couponItemId: 0,
                IsUseCoupon: 1,
                MaxUsableCash: 0,
                MaxUsableECardCash: 0,
                MaxUsableExtraCash: 0,
                balance: 0,
                realMoney: 0,
                isBalance: true,
                eCardCash: 0,
                extraCash: 0,
                realPayMoney: 0,
                isECashCard: true,
                isCoupon: true,
                isSubmit: true,
                Currency: '￥',
                store_id: 0,
				
				paymentData:{}
            }
        },
        components: {
            paymentBox
        },
        computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
        onLoad(options) {
            uni.setNavigationBarTitle({
                title:this.__('优惠买单')
            });

            var that = this;
			
			that.setData({
                Currency: that.__('￥'),
			    store_id: options.store_id || 1001
			});

            this.forceUserInfo(function (user) {
                that.load();
            });
        },

        onUnload(){
            // 离开页面，注销事件
            var that = this
            this.notice.removeNotification("RefreshCoupon1", that);
			
			
			if (this.$refs.paymentBox.showBoxView) {
			    this.$refs.paymentBox.cancel();
			}
        },
        methods: {

            ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'reloadUserResource']),

            load: function() {
				let that = this;

                // 初始化页面
                that.$.request({
                    type: 'post',
                    url: this.Config.URL.store.info,
                    data: {store_id: that.store_id, action:'intro'},
                    dataType: 'json',
                    success: function(data, status, msg, code) {
                        //console.log("优惠买单：", data);
                        that.setData({
                            shop_discount: data.info.store_discount,
                            store_name: data.base.store_name,
                            //Description: data.Description,
                            //CouponEnabeld: data.CouponEnabeld
                        });
                        //console.log("CouponEnabeld", that.CouponEnabeld);

                        false ? that.setData({
                            isshow1: false
                        }) : that.setData({
                            isshow1: true
                        });

                        that.inputVal()
                    }
                });



                this.notice.addNotification("RefreshCoupon1", that.RefreshCoupon1, that);

                var e = 'VendorFeatureSet'; - 1 < e.indexOf("ECashCard") ? (this.setData({
                    isECashCard: true
                }), this.GetUserUsableECash()) : this.setData({
                    isECashCard: false
                }), -1 < e.indexOf("Coupon") ? this.setData({
                    isCoupon: true
                }) : this.setData({
                    isCoupon: false
                })
            },
            clearnum: function(a) {
                this.setData({
                    deliveryNum: ""
                })
            },
            GetUserUsableECash: function() {
                var a = {
                        userName: this.userInfo.UserName,
                        orderRealTotal: 0
                    },
                    that = this;
                that.$.xsr(that.$.makeUrl(orderapi.GetUserUsableECash, a), function(a) {
                    that.setData({
                        MaxUsableCash: a.Info[0].MaxUsableCash,
                        MaxUsableECardCash: a.Info[0].MaxUsableECardCash,
                        MaxUsableExtraCash: a.Info[0].MaxUsableExtraCash
                    })
                })
            },
            RefreshCoupon1: function(a) {
                this.setData({
                    couponItemId: a.couponItemId,
                    IsUseCoupon: a.IsUseCoupon,
                    DiscountMoney: a.DiscountMoney,
                    MoneyLimit: a.MoneyLimit
                }), this.inputVal()
            },
            inputnum: function(e) {
                let that = this;
                this.setData({
                    money: e.detail.value
                });

                parseFloat(e.detail.value) - (parseFloat(e.detail.value) - parseFloat(this.nodiscount || 0)) * (1 - this.shop_discount / 10) < parseFloat(this.MoneyLimit) && this.setData({
                    couponItemId: 0,
                    IsUseCoupon: 0,
                    DiscountMoney: 0,
                    MoneyLimit: 0
                });

                that.$.isNull(e.detail.value) && this.setData({
                    couponItemId: 0,
                    IsUseCoupon: 0,
                    DiscountMoney: 0,
                    MoneyLimit: 0
                });

                parseFloat(this.nodiscount) > parseFloat(e.detail.value) && (that.$.showModal({
                    title: "提示",
                    content: "不参与优惠金额应小于总金额"
                }), this.setData({
                    nodiscount: 0,
                    discount: 0
                }));

                this.inputVal()
            },
            onNodiscount: function(a) {
                let that = this;
                this.setData({
                    nodiscount: a.detail.value
                });
                parseFloat(this.money) - (parseFloat(this.money) - parseFloat(a.detail.value || 0)) * (1 - this.shop_discount / 10) < parseFloat(this.MoneyLimit) && this.setData({
                    couponItemId: 0,
                    IsUseCoupon: 0,
                    DiscountMoney: 0,
                    MoneyLimit: 0
                });

                parseFloat(a.detail.value) > parseFloat(this.money) && (that.$.showModal({
                    title: "提示",
                    content: "不参与优惠金额应小于总金额"
                }), this.setData({
                    nodiscount: 0,
                    discount: 0,
                    nodiscountvalue: ""
                }));

                this.inputVal()
            },
            blur: function(a) {
                let that = this;
                /^\d{1,10}(\.\d{1,2})?$/.test(a.detail.value) || that.$.showModal({
                    title: "提示",
                    content: "请输入正确金额"
                })
            },
            blur1: function(a) {
                let that = this;
                /^\d{1,10}(\.\d{1,2})?$/.test(a.detail.value) || that.$.showModal({
                    title: "提示",
                    content: "请输入正确金额"
                })
            },
            inputVal: function() {
                let that = this;
                var a = this.money,
                    t = this.nodiscount,
                    e = this.shop_discount,
                    o = this.DiscountMoney;
                this.setData({
                    discount: ((a - t) * (1 - e / 10)).toFixed(2),
                    payment: (a - (a - t) * (1 - e / 10) - o).toFixed(2)
                }), this.payment < 0 && this.setData({
                    payment: 0
                }), isNaN(this.discount) && this.setData({
                    discount: 0
                }), isNaN(this.payment) && this.setData({
                    payment: 0
                }), 0 == this.MaxUsableCash && this.setData({
                    realPayMoney: this.payment
                }), this.MaxUsableCash >= this.payment ? this.setData({
                    balance: this.payment,
                    realMoney: 0
                }) : this.setData({
                    balance: this.MaxUsableCash,
                    realMoney: (this.payment - this.MaxUsableCash).toFixed(2)
                }), this.setData({
                    realPayMoney: this.realMoney
                }), 0 == this.isBalance && this.setData({
                    realPayMoney: this.payment
                })
            },
            suitcouponlist: function() {
                var a = this.money,
                    t = this.nodiscount,
                    e = this.shop_discount;
                this.setData({
                    discount: ((a - t) * (1 - e / 10)).toFixed(2)
                });
                var o = {
                        userId: this.userInfo.Id,
                        store_id: 1001,
                        realMoney: (a - (a - t) * (1 - e / 10)).toFixed(2)
                    },
                    that = this;
                that.$.xsr(that.$.makeUrl(cartapi.GetUsableCouponItemListForQuickPay, o), function(a) {
                    that.setData({
                        info: a.Info
                    }), that.$.navigateTo({
                        url: "../favorablesuitcouponlist/favorablesuitcouponlist?val=" + JSON.stringify(a.Info) + "&id=" + that.couponItemId
                    })
                })
            },
            checkboxChange: function(a) {
                0 < a.detail.value.length ? this.setData({
                    isshow: true
                }) : this.setData({
                    isshow: false,
                    nodiscount: 0
                }), this.inputVal()
            },
            paysubmit: function(a) {
                var that = this;
                if (that.$.isNull(this.money) || 0 == this.money) return that.$.showModal({
                    title: "提示",
                    content: "请输入消费总金额"
                }), false;
                if (!/^\d{1,10}(\.\d{1,2})?$/.test(that.money)) return that.$.showModal({
                    title: "提示",
                    content: "请输入正确金额"
                }), false;
                if (that.isshow && !/^\d{1,10}(\.\d{1,2})?$/.test(that.nodiscount)) return that.$.showModal({
                    title: "提示",
                    content: "请输入正确金额"
                }), false;
                if (parseFloat(that.nodiscount) > parseFloat(that.money)) return that.$.showModal({
                    title: "提示",
                    content: "不参与优惠金额应小于总金额"
                }), false;
                this.isBalance ? (0 == this.MaxUsableCash && this.setData({
                    eCardCash: (1 * this.MaxUsableECardCash).toFixed(2),
                    extraCash: (1 * this.MaxUsableExtraCash).toFixed(2)
                }), 0 != this.MaxUsableCash && 0 == this.balance && this.setData({
                    eCardCash: (1 * this.MaxUsableECardCash).toFixed(2),
                    extraCash: (1 * this.MaxUsableExtraCash).toFixed(2)
                }), this.balance >= this.MaxUsableECardCash && this.setData({
                    eCardCash: (1 * this.MaxUsableECardCash).toFixed(2),
                    extraCash: (this.balance - 1 * this.MaxUsableECardCash).toFixed(2)
                }), this.balance < this.MaxUsableECardCash && this.setData({
                    eCardCash: (1 * this.balance).toFixed(2),
                    extraCash: 0
                })) : this.setData({
                    eCardCash: 0,
                    extraCash: 0
                });

                var param = {
                    userName: this.userInfo.UserName,
                    payTypeId: 9,
                    couponItemId: this.couponItemId,
                    totalMoney: this.money,
                    preferential: this.shop_discount,
                    preferentialMoney: this.discount,
                    nonPreferentialMoney: this.nodiscount || 0,
                    realMoney: this.realPayMoney,
                    firstType: 2,
                    eCardCash: this.eCardCash,
                    extraCash: this.extraCash,
                    store_id: this.store_id
                };

				that.$.request({
				    url: this.Config.URL.pay.favorable,
				    data: param,
				    success: function (data, status, msg, code) {
				        if (status == 200)
				        {
							that.gotopay(data.pay_sn, param.realMoney);
				        }
				        else
				        {
				            that.$.alert(msg)
				        }

				    },

				    fail: function (err) {
				    }
				});
            },
            gotopay_old: function() {

                var that = this, param = {
                    order_id: this.order_id,
                    openid: this.userInfo.openId,
                    store_id: this.shopInfo.store_id,
                    typ: 'json',
                    payment_channel_code: 'wx_native',
                    prepay_flag: 1
                };


                that.$.request({
                    url: this.Config.URL.pay.pay,
                    data: param,
                    success: function (data, status, msg, code) {
                        if (status == 200)
                        {
                            that.$.requestPayment({
                                timeStamp: data.timeStamp,
                                nonceStr: data.nonceStr,
                                "package": data.package,
                                signType: data.signType,
                                paySign: data.paySign,
                                success: function (n) {
                                    that.returnUrl(param.order_id)
                                },
                                fail: function (e) {
                                    that.$.redirectTo("/chain/chain/favorabledetail?on=" + param.order_id)
                                },
                                complete: function (n) {
                                    n.errMsg == "requestPayment:cancel" && (that.$.redirectTo("/chain/chain/favorabledetail?on=" + param.order_id), that.sendMessage(param.order_id, 1))
                                }
                            })
                        }
                        else
                        {
                            that.$.alert(msg)
                        }

                    },

                    fail: function (err) {
                    }
                });
            },
			
			gotopay: function(order_id, order_payment_amount) {
			    var that = this;
			
			    that.setData({
			         order_id: order_id,
			        'paymentData': {
			            order_id: order_id,
			            order_money_amount: order_payment_amount,
			
			            user_money: this.userInfo.user_money,
			            user_points:this.userInfo.user_points,
			            user_recharge_card:this.userInfo.user_recharge_card,
			            user_sp:this.userInfo.user_sp
			        }
			    });
			
			    this.$refs.paymentBox.show();
				
			    return true;
			},
			
			onCancel: function(e) {
			    return
			},
			onPaid: function(e) {
			    let that = this
				
				if (this.$refs.paymentBox.showBoxView) {
				    this.$refs.paymentBox.cancel();
				}
			
				that.reloadUserResource(function (user_info) {
					that.$.alert(that.__('支付成功'), function(){
						that.$.gotopage("/chain/chain/favorabledetail?order_id=" + that.order_id)
					}, 2000)
				});
			
			},
			onFail: function(e) {
			},
			
            returnUrl: function(a) {
            },
            switchChange: function(a) {
                a.detail.value ? this.setData({
                    realPayMoney: this.realMoney,
                    isBalance: true
                }) : this.setData({
                    realPayMoney: this.payment,
                    isBalance: false
                })
            }
        }

    }
</script>



<style lang="scss">

    @import "../../styles/_variables";
	
	.store-box { 
		width: 90%; display: flex;line-height:92rpx;height: 92rpx; border-radius: 8rpx; padding-left: 24rpx;
		font-weight: 700;
		    font-size: 16px;
	}
	
    .totalMoney { width: 90%; display: flex; margin: 24rpx auto 0; justify-content: space-betwee; height: 92rpx; border-radius: 8rpx; } .totalMoney label { width: 54%; height: 92rpx; line-height: 92rpx; font-size: 26rpx; color: #000; } .totalMoney input { height: 92rpx; line-height: 92rpx; font-size: 26rpx; text-align: right; margin-right: 20rpx; } .nodiscount { width: 90%; margin: 51rpx auto 20rpx auto; } .check { height: 58rpx; line-height: 58rpx; font-size: 26rpx; color: #808080; } .discount { height: 85rpx; line-height: 90rpx; padding: 0 40rpx; background: #fff; font-size: 28rpx; color: #000; margin: 24rpx 0; } .pay { padding: 0 40rpx; background: #fff; } .coupon { display: flex; justify-content: space-between; height: 98rpx; line-height: 98rpx; font-size: 26rpx; color: #000; border-bottom: 1rpx solid #f1f1f1; } .payments { display: flex; justify-content: space-between; height: 98rpx; line-height: 98rpx; font-size: 28rpx; color: #000; } .payment { width: 90%; height: 80rpx; line-height: 82rpx; background: #db384c; color: #fff; margin-top: 50rpx; } .explain { width: 90%; margin: 50rpx auto; } .title { font-size: 28rpx; color: #000; } .content { font-size: 24rpx; color: #717171; margin-top: 10rpx; } .m-cell-ft::after { content: " "; display: inline-block; height: 12rpx; width: 12rpx; border-width: 4rpx 4rpx 0 0; border-color: #999; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); position: relative; margin-top: -8rpx; top: -4rpx; right: -4rpx; } .u-back2 image { border-radius: 100%; width: 77rpx; height: 77rpx; border: 1px solid #eee; font-size: 20rpx; text-align: center; background-color: #fff; box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35); z-index: 999; opacity: 0.8; line-height: 77rpx; margin-bottom: 20rpx; } .bj_able { background: #fff; width: 92%; margin: 0 auto; padding-bottom: 40rpx; } .able_text { letter-spacing: 2rpx; width: 54%; height: 92rpx; line-height: 92rpx; font-size: 26rpx; color: #000; } .able_input { width:90%; margin:20rpx auto 0 auto; border-bottom:1rpx solid #f1f1f1; height:110rpx; display:flex; } .able_fuhao { font-family: PingFangSC-Medium; font-size: 60rpx; color: #000; letter-spacing: 0.84rpx; text-align: center; line-height: 94rpx; margin-right: 10rpx; font-weight: bold } /* .input_lab { float: left; width: 75%; height: 100%; } */ .checkbox { font-family: PingFangSC-Regular; font-size: 26rpx; color: #7b7b7b; letter-spacing: 0.5rpx; text-align: center; } .no_lab { width: 90%; display: flex; margin: 24rpx auto 0; justify-content: space-betwee; height: 98rpx; border-radius: 8rpx; line-height: 98rpx; border-bottom: 1rpx solid #f1f1f1; } .pict_fal { width: 38rpx; height: 38rpx; position: absolute; top: 161rpx; right: 9%; } .fal_pic { width: 38rpx; height: 38rpx; } .input_lab{ width: 87%; font-family: UICTFontTextStyleBody; font-size: 74rpx; height: 74rpx; /* line-height:74rpx; *//* padding:8rpx 0; */ min-height: 83rpx; line-height: normal; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; vertical-align: middl; font-weight: bold }
</style>
